<template>
	<div style="background-color: white;overflow: hidden;">
		<h2 class="title">我的学习记录</h2>
    <div class="sum-container">
      <div class="today">
        <div class="sum-title">今日学习</div>
        <div class="sum-value">
          <div class="sum-value-number">0</div>
          <div class="sum-value-unit">小时</div>
        </div>
      </div>
      <div class="total">
        <div class="sum-title">总共学习</div>
        <div class="sum-value">
          <div class="sum-value-number">0</div>
          <div class="sum-value-unit">小时</div>
        </div>
      </div>
      <div class="compare">
        <div class="sum-title">高于平台</div>
        <div class="sum-value">
          <div class="sum-value-number">0%</div>
          <div class="sum-value-unit">学员</div>
        </div>
      </div>
    </div>

		<div class="tabs">

			  <div class="item-tab" style="font-weight: 600;
			  color: #03d3bd;" @click="change(1)">全部
			  		<div class="actline"></div>
					
			  	</div>


			<div class="item-tab" @click="change(2)">进行中</div>
			<div class="item-tab" @click="change(3)">已完成</div>


		</div>
		<all v-show="active==1"></all>
        <ongoing v-show="active==2"></ongoing>
		<completed v-show="active==3"></completed>
	</div>
</template>

<script>
	import all from "./record/all"
	import ongoing from "./record/ongoing"
  import completed from "./record/completed"
	export default {
		components: {
			all : all,
      ongoing : ongoing,
      completed : completed,
		},
		data() {
			return {
				active:1
			}
		},
		methods: {
			//切换导航
			change(e) {
				this.active = e;
			}
		}
	}
</script>

<style scoped="scoped">

	.item {
	  margin-top: 10px;
	  margin-right: 40px;
	}
	.content .title {
		margin: 20px 20px 10px;
	}

	.el-tabs__header {
		padding: 0;
		position: relative;
		margin: 0 0 15px;
	}

	.el-tabs__nav-wrap {
		overflow: hidden;
		margin-bottom: -1px;
		position: relative;
	}

	.title {
		margin: 20px 20px 10px;
	}
  .sum-container{
    display: flex;
  }
  .sum-title{
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
    line-height: 2;
    font-weight: 400;
  }
  .sum-value{
    color: #333;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    line-height: 12px;
    margin-bottom: 9px;
  }
  .sum-value-number{
    line-height: 30px;
    font-size: 30px;
    display: inline-block;
  }
  .sum-value-unit{
    color: #333;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    line-height: 12px;
  }
  .today{
    width: 28%;
    text-align: center;
    margin: 30px 0;
    border-right: 1px solid #f5f5f5;
  }
  .total{
    width: 28%;
    text-align: center;
    margin: 30px 0;
    border-right: 1px solid #f5f5f5;
  }
  .compare{
    width: 28%;
    text-align: center;
    margin: 30px 0;
  }
	.tabs {
		width: 100%;
		margin: 0 auto;
		height: 72px;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		padding: 28px 30px;
		background-color: white;
	}

	.item-tab {
		width: 64px;
		height: 16px;
		margin-right: 1.875rem;
		font-size: 14px;
		font-weight: 400;
		color: #666;
		line-height: 16px;
		margin-right: 80 px;
		cursor: pointer;
		position: relative;
	}

	.actline {
		width: 25px;
		height: 2px;
		background: #03d3bd;
		position: absolute;
		left: 1px;
		top: 30px;
	}

	.attach-item {
		width: 100%;
		box-sizing: border-box;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 50px;
	}

	.attach-name {
		height: 16px;
		font-size: 16px;
		font-weight: 500;
		color: #333;
		line-height: 16px;
	}

	.download-attach {
		margin-left: 30px;
		width: 104px;
		height: 40px;
		background: #03d3bd;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 400;
		color: #fff;
		cursor: pointer;
	}
	
</style>
